<template>
    <div class="user">
      <div class="user-info">
        <van-cell>
          <template #icon>
            <img :src="userInfo.photo" class="user-info__img"/>
          </template>
          <template #title>
            <span class="user-info__username">{{userInfo.name}}</span>
          </template>
          <template #label>
            <div class="user-info__surpot">
                <van-tag  text-color="#007bff" color="#fff">申请认证</van-tag>
            </div>
          </template>
        </van-cell>
      </div>
      <div class="user-data">
        <div class="user-data__dynamic flex">
          <span class="user-data-count">{{userInfo.art_count}}</span>
          <span class="">动态</span>
        </div>
         <div class="user-data__focus flex">
          <span class="user-data-count">{{userInfo.follow_count}}</span>
          <span class="">关注</span>
        </div>
         <div class="user-data__fans flex">
          <span class="user-data-count">{{userInfo.fans_count}}</span>
          <span class="">粉丝</span>
        </div>
      </div>
      <div class="user-setting">
        <van-cell-group >
          <van-cell title="编辑资料"  is-link icon="edit" to="/edit_user"/>
          <van-cell title="小思同学"  is-link icon="chat-o" to="/chat" />
          <van-cell title="退出登入"  is-link icon ="info-o" @click="quitFn"/>
        </van-cell-group>
      </div>
    </div>
</template>
<script>
import { Dialog } from 'vant'
import { removeToken } from '@/utils/token'
import { mapMutations } from 'vuex'
export default {
  name: 'UserC',
  data () {
    return {
      userInfo: {}
    }
  },
  methods: {
    // 退出登入
    quitFn () {
      Dialog.confirm({
        title: '确认退出登入',
        message: ''
      })
        .then(() => {
          // 确认退出登入后就移除token,跳转到登入页面
          removeToken()
          this.$router.replace('/login')
        })
        .catch(() => {
          // on cancel
        })
    },
    ...mapMutations('user', { getPhoto: 'GETUSERPHOTO' })
  },
  async created () {
    try {
      const res = await this.$API.reqUserBaseInfo()
      console.log(1)
      console.log(res.data.data)
      this.userInfo = res.data.data
      this.getPhoto(this.userInfo.photo)
      localStorage.setItem('PHOTO', this.userInfo.photo)
    } catch (error) {

    }
  }
}
</script>
<style lang="less" scoped>
.user{
  .user-info
  {
       position: relative;
      //  padding: 10px 6px 6px 0;
       width: 100%;
       background-color: #007bff;
       /deep/.van-cell{
        background-color: #007bff;
       }
       .user-info__img{
        height: 80px;
        width: 80px;
        border-radius: 50%;
       }
       .user-info__username{
        position: absolute;
        top:23px;
        left:105px;
        color: #fff;
       }
       .user-info__surpot{
        position: absolute;
        top:50px;
        left:105px;
        background-color: #007bff;
       }
  }
  .user-data{
    display: flex;
    justify-content: space-between;
    padding: 15px 30px 15px 30px;
    font-size: 16px;
    background-color: #007bff;
    color: #fff;
    .flex{
      display: flex;
      flex-direction: column;
    }
    .user-data-count{
      padding-left: 11px;
    }
  }
}
</style>
